<%@ page import="java.util.Map" %>
<%@ page import="UserImformation.Account" %>
<%@ page import="java.io.BufferedReader" %>
<%@ page import="java.io.Reader" %>
<%@ page import="java.io.FileReader" %>
<%@ page import="javax.json.bind.Jsonb" %>
<%@ page import="javax.json.bind.JsonbBuilder" %>
<%@ page import="JsonbClass.Jsonmake" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    Map<String,String> infoMap = (Map<String, String>) request.getSession().getAttribute("user");
    String username = infoMap.get("username");
    Account account = new Account();

    if(username != null) {
        int n = 0;
        String fileName = "UserInfo.txt";
        Reader reader = new FileReader(fileName);
        BufferedReader bufferedReader = new BufferedReader(reader);
        String str = null;
        while ((str = bufferedReader.readLine()) != null) {
            if (!str.trim().equals("")) {
                n++;
            }
        }
        bufferedReader.close();
        reader.close();

        int len = 0;
        Account[] users;

        if (n != 0) {
            users = new Account[n];
            Jsonb jsonb = Jsonmake.js();
            reader = new FileReader(fileName);
            bufferedReader = new BufferedReader(reader);
            while ((str = bufferedReader.readLine()) != null) {
                if (!str.trim().equals("")) {
                    users[len++] = jsonb.fromJson(str, Account.class);
                }
            }
            bufferedReader.close();
            reader.close();

            if (users != null) {
                for (int i = 0; i < users.length; i++) {
                    if (users[i].getUsername().equals(username)) {
                        account = users[i];
                        break;
                    }
                }
            }
        }
    }
%>
<html lang="en">
<head>
    <title>登录界面</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/Img.css">
    <link href="iconfont/style.css" type="text/css" rel="stylesheet">
    <script src="jQuery/jquery-1.12.4.min.js"></script>
    <style>
        body{color:#fff; font-family:"微软雅黑"; font-size:14px;}
        .main_content{background:url(images/main_bg.png) repeat; margin-left:auto; margin-right:auto; text-align:center; border-radius:8px;}
        .font_color{color:#1a85b7;}
        @media (min-width:200px){.pd-xs-20{padding:20px;}}
        @media (min-width:768px){.pd-sm-50{padding:50px;}}
        #grad {
            background: -webkit-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(#4990c1, #52a3d2, #6186a3); /* Firefox 3.6 - 15 */
            background: linear-gradient(#4990c1, #52a3d2, #6186a3); /* 标准的语法 */
        }
    </style>
</head>
<body style="background:url(images/bg.jpg) no-repeat;">

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header" style="float: right;">
            <a class="navbar-brand" href="/LogoutServlet">退出</a>
        </div>
    </div>
</nav>

<div class="container">

    <!--头像-->
    <div class="col-sm-8 col-md-5 center-auto pd-sm-50 pd-xs-20 main_content" style="width: 320px; height: 320px; float: left;">
        <img class="img-circle" src="headImages/<%=account.getImg()%>" style="width: 75%; height: 75%; margin-top: 12.5%;" alt="个人头像">
        <button type="submit" class="btn btn-primary btn-block" style="margin-top: 20px;" id="headImg">修改头像</button>
    </div>

        <!--上传图片box-->
        <div class="uploadImg-box" style="display: none;">
            <h3>修改头像</h3>
            <div class="box-min">
                <form action="ChangeHeadImgServlet" enctype="multipart/form-data" method="post">
                    <div class="form-group">
                        <input id="lefile" type="file" style="display:none" name="headfile" >
                        <div class="input-append">
                            <input id="photoCover" class="form-control" type="text"  name="headfileTemp">
                            <a class="btn btn-info btn-sm showbtn" onclick="$('input[id=lefile]').click();">Browse</a>
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 40px;">
                        <button type="submit" class="btn btn-primary btn-block" style="margin-top: 20px;">修改头像</button>
                    </div>
                </form>
                <input name="username" value="<%account.getUsername();%>" style="display: none">
            </div>
        </div>

    <!--信息页面-->
    <div class="col-sm-8 col-md-5 center-auto pd-sm-50 pd-xs-20 main_content" style="width: 750px; height: 750px; float: right;">
        <img src="images/Settings.png" style="width: 10%; height: 10%;" alt="设置">
        <h2 class="font_color" style="font-size: 18px;"> 账户设置 </h2>

        <span class="font_color" style="font-size: 15px;">
            - - - - 个人信息 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        </span>

        <div class="main_content font_color" style="height: 15%; width: 49%; float: left; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">用户名:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getUsername()%></p>
        </div>
        <div class="main_content font_color" style="height: 15%; width: 49%; float: right; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">姓&nbsp;&nbsp;名:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getName()%></p>
        </div>
        <div class="main_content font_color" style="height: 15%; width: 49%; float: left; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">学&nbsp;&nbsp;院:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getFaculty_title()%></p>
        </div>
        <div class="main_content font_color" style="height: 15%; width: 49%; float: right; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">邮&nbsp;&nbsp;箱:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getEmail()%></p>
        </div>

        <p/>
        <span class="font_color" style="font-size: 15px; float: left; margin-left: 20px; margin-top: 8px;">
                - - - - 绑定信息 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
            </span>

        <div class="main_content font_color" style="height: 15%; width: 49%; float: left; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">手机:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getPhone()%></p>
        </div>
        <div class="main_content font_color" style="height: 15%; width: 49%; float: right; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">Q Q:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getQq()%></p>
        </div>
        <div class="main_content font_color" style="height: 15%; width: 49%; float: left; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">微信:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getWechat()%></p>
        </div>
        <div class="main_content font_color" style="height: 15%; width: 49%; float: right; margin-top: 10px;">
            <p style="line-height: 50px; text-align: left; margin-left: 30px;">博客:</p>
            <p style="line-height: 0px; text-align: left; margin-left: 80px;"><%=account.getBlog()%></p>
        </div>

    </div>

    <div class="main_content" style="width: 320px; height: 50px; float: left; margin-top: 30px; line-height: 50px;">
        <p style="height: 50px; text-align: center; color: #1a85b7;">个人信息Settings</p>
    </div>


</div>

</body>
</html>
<script>
    $(document).ready(function(){
        //上传图片框
        $('input[id=lefile]').change(function() {
            $('#photoCover').val($(this).val());
        });

        //修改头像
        $("#headImg").hover(function () {
            $("#headImg").css("cursor","pointer");
            $("#headImg img").css("opacity","0.7");
            $("#headImg span").css("display","inline");
        },function () {
            $("#headImg img").css("opacity","1");
            $("#headImg span").css("display","none");
        });

        $("#headImg").click(function () {
            $(".uploadImg-box").show();
            $(".container").css("opacity","0.4");
            $(".uploadImg-box").css("opacity","1");
        });

        $(".uploadImg-box img").click(function () {
            $(".uploadImg-box").hide();
            $(".container").css("opacity","1");
        });

        //修改个人信息
        $("#changeInfo").click(function () {
            $("#info-form").attr("action","/changeInfo");
            //隐藏修改按钮
            $("#changeInfo").hide();
            //显示 保存、取消 按钮
            $("#form-button").show();
            var input = $(".input");
            var len = input.length;
            for(var i=0;i<len;i++){
                var text = input.eq(i).text();
                var name = $(".noshowKey").eq(i).text();
                var str = '<input type="text" name="'+name+'" value="'+text+'"><span id="s_'+i+'"></span>';
                input.eq(i).html(str);
            }
        });

        //点击取消按钮
        $(".cancel").click(function () {
            window.location.reload();
        });

        //绑定个人信息
        $("#bindInfo").click(function () {
            $("#bind-form").attr("action","/bindInfo");
            //隐藏修改按钮
            $("#bindInfo").hide();
            //显示 保存、取消 按钮
            $("#bind-button").show();
            var input = $(".bind");
            var len = input.length;
            console.log(len);
            for(var i=0;i<len;i++){
                var text = $.trim(input.eq(i).text());
                console.log(text);
                if(text=="尚未绑定"){
                    text = "";
                }
                var name = $("p.noshowKey").eq(i).text();
                var str = '<input type="text" name="'+name+'" value="'+text+'">';
                input.eq(i).html(str);
            }
        });

    });
</script>